<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import './Widgets/widgets.css';

// 设置cesium 静态资源路径
window.CESIUM_BASE_URL = '/';

// 天地图 官网申请的key https://console.tianditu.gov.cn/api/key
const webKey = '01fc395160d8eb3b82aefe65b2280e58';

Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDkwYWVhOS0wNzI5LTQ3OTEtOWFiMC1kY2M3MTFiM2I2NWQiLCJpZCI6MTkyNTU1LCJpYXQiOjE3MDY1MTM0MTh9.YAPVHr1d7PBuWayCXM9deCxKg3AbtsXUJiVpubVS3NY';

onMounted(async () => {
  // 地球视图，底图加载
  const viewer = new Cesium.Viewer('container', {
    //设置地形
    terrainProvider: Cesium.createWorldTerrain({
      requestWaterMask: true, // 水纹效果  海里面有波浪的效果
      requestVertextNormal: true, // 光照效果
    }),

    //信息窗口
    infoBox: false,
  });

  //隐藏cesium Icon-logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';

  // 使用entities 创建矩形
  const rectangle = viewer.entities.add({
    name: 'Rectangle',
    // position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 2000),
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(
        90,
        20, // 左上角的点
        110,
        30 // 右下角的点
      ),
      material: Cesium.Color.RED.withAlpha(0.5), // 材质颜色
      outline: true,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 2,
    },
  });

  // 几何体 实例
  const instance = new Cesium.GeometryInstance({
    //primivite 创建矩形 【官网案例】api https://cesium.com/learn/cesiumjs-learn/cesiumjs-geometry-appearances/
    geometry: new Cesium.RectangleGeometry({
      // 创建几何体
      // API https://cesium.com/learn/cesiumjs/ref-doc/RectangleGeometry.html?classFilter=RectangleGeometry
      rectangle: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
      height: 0,
      // 贴图的 外观和 材质需要是同一个类型
      vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT, // 每个实例的颜色外观
    }),
    attributes: {
      color: new Cesium.ColorGeometryInstanceAttribute(0.0, 0.0, 1.0, 0.8),
    },
  });

  const anotherInstance = new Cesium.GeometryInstance({
    geometry: new Cesium.RectangleGeometry({
      rectangle: Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
      vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
    }),
    attributes: {
      color: new Cesium.ColorGeometryInstanceAttribute(1.0, 0.0, 0.0, 0.8),
    },
  });

  // https://cesium.com/learn/cesiumjs/ref-doc/Material.html?classFilter=material
  // api 通过配置的方式，添加材质
  // const maa = new Cesium.Material({
  //   fabric: {
  //     // type: 'Color', // Water  Grid 皆可
  //     // uniforms: {
  //     //   color: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
  //     // },

  //     type: 'DiffuseMap',
  //     uniforms: {
  //       image: './texture/ta.png',
  //     },
  //   },
  // });

  // 自定义编写材质的着色器
  const maa = new Cesium.Material({
    fabric: {
      type: 'CustomMaterial',
      uniforms: {
        // color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
      },
      // 自定义 着色器
      source: `czm_material czm_getMaterial(czm_materialInput materialInput) {
                  czm_material material = czm_getDefaultMaterial(materialInput);
                  material.diffuse = vec3(1.0,1.0,0.0); // 自定义修改颜色
                  material.alpha = 0.8; // 自定义修改透明度
                  return material;
              }`,
    },
  });

  console.log(maa.shaderSource);

  // api https://cesium.com/learn/cesiumjs/ref-doc/EllipsoidSurfaceAppearance.html?classFilter=Ellipsoid
  /**
   * 设定几何体都是与🌍的椭球体平行的
   * 假定几何体与地球椭球体平行，那么就可以在计算大量顶点属性的时候节省内存
   */
  const appearance11 = new Cesium.EllipsoidSurfaceAppearance({
    material: maa,
    aboveGround: false,
    translucent: true,
  });

  // 添加到场景中 https://cesium.com/learn/cesiumjs-learn/cesiumjs-geometry-appearances/
  viewer.scene.primitives.add(
    // 创建图元
    new Cesium.Primitive({
      geometryInstances: [instance, anotherInstance], // 同时有多个几何体
      appearance: appearance11,
      // appearance: new Cesium.PerInstanceColorAppearance({
      //   flat: true, // 外观平整，贴着球体
      // }),
    })
  );

  // 设置相机位置
  viewer.camera.setView(viewer.entities);
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
#container {
  height: 94vh;
  width: 94vw;
}
</style>
